<template>
	<view>
		<view class="map_box">
		  <map id="navi_map" :longitude="longitude" :latitude="latitude" scale="12" :markers="markers" :polyline="polyline"></map>
		</view>

		<view class="text_box">
		  <view class="text">{{distance}}</view>
		</view>
	</view>
</template>
 
<script>
	
	import amapFile from '../../common/amap-wx.js'
	
	export default {
		data() {
			return {
				latitude: 39.91,
				longitude: 116.69,
				markers: [{// 地图上的起点标志
				  iconPath: "../../static/img/mapicon_navi_s.png",
				  id: 0,
				  latitude: 39.91,
				  longitude: 116.69,
				  width: 23,
				  height: 33
				},{//地图上的终点标志
				  iconPath: "../../static/img/mapicon_navi_e.png",
				  id: 0,
				  latitude: 39.91,
				  longitude: 116.70 ,
				  width: 24,
				  height: 34
				}],
				distance: '',
				polyline: []
			};
		},
		onLoad: function() {
			var that = this;
			var myAmapFun = new amapFile.AMapWX({key: 'a00412fadf3cfb863ee24544cede5edc'});
			myAmapFun.getDrivingRoute({
				//路线规划，两个位置
			  origin: '116.69,39.91',
			  destination: '116.70,39.91',
			  success: function(data){
				var points = [];
				if(data.paths && data.paths[0] && data.paths[0].steps){
				  var steps = data.paths[0].steps;
				  for(var i = 0; i < steps.length; i++){
					var poLen = steps[i].polyline.split(';');
					for(var j = 0;j < poLen.length; j++){
					  points.push({
						longitude: parseFloat(poLen[j].split(',')[0]),
						latitude: parseFloat(poLen[j].split(',')[1])
					  })
					} 
				  }
				}
				that.polyline = [{
					points: points,
					color: "#0091ff",
					width: 6
				}]
				if(data.paths[0] && data.paths[0].distance){
					that.distance = '距您还有' + data.paths[0].distance + '米'
				}
			  },
			  fail: function(info){

			  }
			})
		  },
		methods:{
			
		}
	}
</script>
 
<style>
 
	.flex-style{
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	}
	.flex-item{
	  height: 35px; 
	  line-height: 35px;
	  text-align: center;
	  -webkit-box-flex: 1;
	  -webkit-flex: 1;
	  flex: 1
	}
	.flex-item.active{
	  color:#0091ff;
	}
	.map_box{
	  position:absolute;
	  /* top: 30rpx; */
	  left: 0px;
	  right: 0px;
	  height: 500rpx;
	}
	#navi_map{
	  width: 100%;
	  height: 100%;
	}
	.text_box{
	  position:absolute;
	  top: 30rpx;
	  height: 90px;
	  left: 0px;
	  right: 0px;
	}
	.text_box .text{
	  margin: 15px;
	  color: red;
	}
	.detail_button{
	  position:absolute;
	  bottom: 30px;
	  right: 10px;
	  padding: 3px 5px;
	  color: #fff;
	  background: #0091ff;
	  width:50px;
	  text-align:center;
	  border-radius:5px;
	}
</style>